<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
  <title>酒吧影集</title>
  <link rel="stylesheet" href="css/style.css?5346">
  <link rel="icon" href="../favicon.ico">
</head>

<body>

  <div id="app">
    <audio class="bgAudio" src="https://static.hudongmiao.com/joymewH5/audio/gbqqNew.mp3" ref="audioDom" loop="loop"
      preload></audio>
    <div class="container">
      <div class="music" :class="{ off: !isMusicPlay, on: isMusicPlay }" @click="switchMusic"></div>
      <div class="album" :class="{'album--open': isOpenedTop}" id="album" v-show="items.length > 0">
        <div class="album__paper" :style="{zIndex: isOpenedTop ? 0 : items.length + 1 }" :class="{'open': isOpenedTop}"
          @touchstart="handleTouchStartTop" @touchend="handleTouchEndTop">
          <div class="album__page front" :style="{transform: `translateZ(0.${items.length + 11}px)`}">
            <div>
              <div class="album__top-title">Joymew Album</div>
              <div class="cat-mark"></div>
            </div>
          </div>
          <div class="album__page back" :style="{zIndex: 0}"></div>
        </div>
        <div class="album__paper" v-for="(page, idx) in items" :key="idx + 1"
          :style="{zIndex: page.isOpen ? idx + 1 : items.length + 1 - (idx + 1) }" :class="{'open': page.isOpen}"
          @touchstart="handleTouchStart" @touchend="handleTouchEnd">
          <div class="album__page front" :style="{transform: `translateZ(0.${items.length + 11 - (idx + 1)}px)`}">
            <div class="content">
              <div class="content__title">{{ page.title }}</div>
              <div class="content__img1">
                <div class="ctImg" :style="{backgroundImage:'url('+ page.img1 +')'}"></div>
                <div class="content__text">{{ idx + 1 }}</div>
              </div>
              <!-- <div class="content__img2"><img :src="page.img2" /></div>
              <div class="content__img3"><img :src="page.img3" /></div> -->
            </div>
          </div>
          <div class="album__page back" :style="{zIndex: idx + 1}"></div>
        </div>
        <div class="album__back"></div>
        <div class="album__bottom"></div>
        <div class="album__shadow"></div>
      </div>
    </div>
    <button class="clipBtn" id="clipBtn" v-show="!isOpenedTop">复制链接分享影集</button>
  </div>


  <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  <script src='js/clipboard.min.js?5346'></script>
  <script src='js/vue.min.js'></script>
  <script src='js/vuetify.min.js'></script>
  <script src="js/script.js?5346"></script>
  <script>
    var btn = document.getElementById('clipBtn');
    var clipboard = new ClipboardJS('.clipBtn', {
      text: function () {
        return window.location.href;
      }
    });

    clipboard.on('success', function (e) {
      console.log(e);
      alert('复制成功!');
    });

    clipboard.on('error', function (e) {
      console.log(e);
      alert('复制失败!');
    });
  </script>
</body>

</html>